<template>
  <view
    class="mix-btn-content"
    :class="{
      disabled: loading || disabled || dead,
    }"
    :style="[{ marginTop: marginTop }]"
    @click="confirm"
  >
    <image
      v-if="loading"
      class="loading-icon"
      src=""
    ></image>
    <text
      v-if="icon"
      class="mix-icon"
      :class="icon"
      :style="{ fontSize: iconSize + 'rpx' }"
    ></text>
    <text class="mix-text">{{ text }}</text>
  </view>
</template>

<script>
/**
 * 按钮组件
 * @prop text 按钮显示文字
 * @prop icon 按钮图标
 * @prop iconSize 按钮显示文字
 * @prop isConfirm 点击后是否处理loading状态
 * @prop disabled 按钮禁用
 * @prop marginTop 按钮上边距
 */
let stopTimer = null;
export default {
  name: "MixButton",
  data() {
    return {
      dead: false,
      loading: false,
    };
  },
  props: {
    text: {
      type: String,
      default: "提交",
    },
    icon: {
      type: String,
      default: "",
    },
    iconSize: {
      type: Number,
      default: 32,
    },
    isConfirm: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    marginTop: {
      type: String,
      default: "0rpx",
    },
  },
  methods: {
    stop() {
      if (stopTimer) {
        clearTimeout(stopTimer);
        stopTimer = null;
      }
      this.loading = false;
    },
    death() {
      this.loading = false;
      this.dead = true;
    },
    confirm() {
      if (this.dead) {
        return;
      }
      if (this.loading || this.disabled) {
        return;
      }
      if (this.isConfirm) {
        this.loading = true;

        stopTimer = setTimeout(() => {
          this.loading = false;
          clearTimeout(stopTimer);
          stopTimer = null;
        }, 10000);
      }
      this.$emit("onConfirm");
    },
  },
};
</script>

<style scoped lang="scss">
.mix-btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 610rpx;
  height: 80rpx;
  margin: 0 auto;
  font-size: 32rpx;
  color: #fff;
  border-radius: 100rpx;
  background-color: $base-color;
  position: relative;

  &:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
    width: 85%;
    height: 85%;
    background: linear-gradient(151deg, #f75248 0%, #f5473b 100%);
    border-radius: 100rpx;
    opacity: 0.4;
    filter: blur(10rpx);
  }
  &.disabled {
    opacity: 0.65;
  }
  .mix-text {
    position: relative;
    z-index: 1;
  }
  .mix-icon {
    position: relative;
    z-index: 1;
    margin-right: 8rpx;
  }
  .loading-icon {
    width: 34rpx;
    height: 34rpx;
    transform-origin: 50% 50%;
    margin-right: 16rpx;
    animation: rotate 2s linear infinite;
    position: relative;
    z-index: 1;
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
